<template>
  <view class="verificat-phone">
    <view> 输入短信验证码</view>
    <view> 验证码已经发送至{{ newPhone }},请在下方输入框输入6位数字验证码</view>
    <one-input type="box" @finish="finishedOne"></one-input>
    <view class="time-end" v-if="showSendCode == false">
      {{ timer }}秒后重新发送</view
    >
    <view class="time-end1" v-else @click="verificatCodeTime">
      重新获取验证码</view
    >
  </view>
</template>

<script>
import oneInput from "./wakary-input";

export default {
  components: {
    oneInput,
  },
  data() {
    return {
      newPhone: "",
      truePhone: "",
      timer: null,
      timeInit: 60,
      showSendCode: false,
    };
  },
  methods: {
    /**
     * 验证码 输入完成
     */
    finishedOne(val) {
      var form = {
        phone: this.truePhone,
        code: val,
        id: this.vuex_userInfo.id,
      };
      this.$u.api.changeUserPhoneApi(form).then((res) => {
        // 这里需要修改缓存的信息
        if (this.vuex_userInfo.type === 1) {
          var userInfo = this.vuex_userInfo;
          userInfo.phone = this.truePhone;
          this.$u.vuex("vuex_userInfo", userInfo);
        } else if (this.vuex_userInfo.type === 2) {
          var userInfo = this.vuex_userInfo;
          userInfo.phone = this.truePhone;
          this.$u.vuex("vuex_userInfo", userInfo);

          var teacherInfo = this.vuex_teacher;
          teacherInfo.phone = this.truePhone;
          teacherInfo.account = this.truePhone;
          this.$u.vuex("vuex_teacher", teacherInfo);
        } else if (this.vuex_userInfo.type === 3) {
          var userInfo = this.vuex_userInfo;
          userInfo.phone = this.truePhone;
          this.$u.vuex("vuex_userInfo", userInfo);

          var principalInfo = this.vuex_principal;
          principalInfo.phone = this.truePhone;
          principalInfo.account = this.truePhone;
          this.$u.vuex("vuex_principal", principalInfo);
        }

        this.$u.route({
          url: "/pages/status/status",
          params: {
            img: "success.png",
            title: "修改成功",
            text: "您的联系电话已经修改为：" + this.truePhone,
          },
        });
      });
    },

    /**
     * 手机打码处理
     */
    telHideCenter(val) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      val = val.toString().replace(reg, "$1****$2");
      return val;
    },

    /**
     * 验证码倒计时
     */
    verificatCodeTime() {
      this.showSendCode = false;
      this.timer = this.timeInit;
      var time = setInterval(() => {
        if (this.timer > 1) {
          this.timer = this.timer - 1;
        } else {
          clearInterval(time);
          this.showSendCode = true;
        }
      }, 1000);
    },
  },
  onLoad(option) {
    this.truePhone = option.phone;
    this.newPhone = this.telHideCenter(option.phone);
    //发送短信 倒计时
    this.verificatCodeTime();
  },
};
</script>


<style lang="scss" scoped>
.verificat-phone {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding: 20 * 2rpx;
  & > view:nth-child(1) {
    font-size: 45rpx;
    color: #333333;
    margin-bottom: 10rpx;
    margin-top: 30rpx;
  }
  & > view:nth-child(2) {
    font-size: 29rpx;
    color: #666666;
    margin-bottom: 100rpx;
  }
  .time-end {
    font-size: 28rpx;
    color: #666666;
    margin-top: 50rpx;
    text-align: center;
  }
  .time-end1 {
    font-size: 28rpx;
    color: #07c38f;
    margin-top: 50rpx;
    text-align: center;
  }
}
</style>